<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="Bootstrap-Admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="../plugins/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../plugins/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
    <!--  插件css-->
    <link rel="stylesheet" href="../plugins/select2/dist/css/select2.min.css"/>
    <link rel="stylesheet" href="../plugins/select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.min.css"/>
    <title>Bootstrap-Admin - 开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-light pt-2">
<div class="container-fluid">
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <h6 class="mb-2 text-muted">
                下拉框的强化版,我们在mvc开发中假如后端有成千上万的数据直接通过模板引擎赋值那是不明智的
            </h6>
            <hr>
            <div class="row row-cols-1 row-cols-md-2 ">
                <!-- 本地数据单选-->
                <div class="col">
                    <h5 class="card-title">select2本地数据(单选)</h5>
                    <hr>
                    <form>
                        <div class="mb-3">
                            <label for="fruit" class="form-label">水果</label>
                            <select aria-label="fruit" class="form-control" id="fruit" name="fruit"></select>
                        </div>
                    </form>

                </div>
                <!-- 本地数据单选回显-->
                <div class="col">
                    <h5 class="card-title">select2本地数据(单选)-回显</h5>
                    <hr>
                    <form>
                        <div class="mb-3">
                            <label for="fruit2" class="form-label">水果</label>
                            <select aria-label="fruit2" class="form-control" id="fruit2" name="fruit2"></select>
                        </div>
                    </form>

                </div>
                <!-- 本地数据多选-->
                <div class="col">
                    <h5 class="card-title">select2本地数据(多选)</h5>
                    <hr>
                    <form>
                        <div class="mb-3">
                            <label for="fruit3" class="form-label">水果</label>
                            <select aria-label="fruit3" class="form-control" id="fruit3" name="fruit3"></select>
                        </div>
                    </form>

                </div>
                <div class="col">
                    <h5 class="card-title">select2本地数据(多选)-回显</h5>
                    <hr>
                    <form>
                        <div class="mb-3">
                            <label for="fruit4" class="form-label">水果</label>
                            <select aria-label="fruit4" class="form-control" id="fruit4" name="fruit4"></select>
                        </div>
                    </form>
                </div>


                <div class="col">
                    <h5 class="card-title">select2-服务端(单选+分页+搜索)</h5>
                    <hr>
                    <form>
                        <div class="mb-3">
                            <label for="article" class="form-label">文章</label>
                            <select aria-label="文章" class="form-control" id="article" name="article"></select>
                        </div>
                    </form>
                </div>
                <div class="col">
                    <h5 class="card-title">select2-服务端(单选+分页+搜索)-回显</h5>
                    <hr>
                    <form>
                        <div class="mb-3">
                            <label for="article2" class="form-label">文章</label>
                            <select aria-label="article2" class="form-control" id="article2"
                                    name="article2"></select>
                        </div>
                    </form>
                </div>
                <div class="col">
                    <h5 class="card-title">select2-服务端(多选+分页+搜索+自定义模板+选中回调添加图标)</h5>
                    <hr>
                    <form>
                        <div class="mb-3">
                            <label for="user" class="form-label">用户</label>
                            <select aria-label="user" class="form-control" id="user" name="user"></select>
                        </div>
                    </form>
                </div>
                <div class="col">
                    <h5 class="card-title">select2-服务端(多选+分页+搜索+自定义模板+选中回调添加图标)-回显</h5>
                    <hr>
                    <form>
                        <div class="mb-3">
                            <label for="user2" class="form-label">用户</label>
                            <select aria-label="user2" class="form-control" id="user2" name="user2"></select>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>
<script src="../plugins/jquery/dist/jquery.min.js"></script>
<script src="../plugins/select2/dist/js/select2.min.js"></script>
<script src="../plugins/select2/dist/js/i18n/zh-CN.js"></script>
<script>


    let data1 = [
        //本地数据必须使用占位符,否则placeholder无效
        {id: '', text: ''},
        {id: 1, text: '香蕉'},
        {id: 2, text: '葡萄'},
        {id: 3, text: '橘子'},
        {id: 4, text: '橙子'},
        {id: 5, text: '榴莲'}
    ]


    //==============================本地数据单选==============================
    $('#fruit').select2({
        //default classic bootstrap-5
        theme: "bootstrap-5",
        data: data1,
        //父容器,如果你是在模态框中使用需要指定这个(bootstrap)
        // dropdownParent: $('#publishModal'),
        language: 'zh-CN',
        //弹出的检索框的宽度
        width: '100%',
        //默认提示(本地数据时,需要在templateSelection方法中进行设置，同时该选项必须存在)
        placeholder: '',
        //至少输入几个字符才开始检索
        minimumInputLength: 0,
        //可否手动删除
        allowClear: false,
        //是否多选
        multiple: false,
        //最多只能选择3个项目(multiple:true生效)
        maximumSelectionLength: 3,
        // 让template的html显示效果，否则输出代码
        escapeMarkup: function (markup) {
            return markup;
        },
        // 搜索结果样式样式自定义
        templateResult: function (option) {
            if (option.loading) return option.text;
            return `
                 <div class="py-1 fw-bold">${option.text}</div>
                `;
        },

        // 点击option后显示在输入框中的文本自定义
        templateSelection: function (data) {
            if (data.id === '') {
                return '请选择你最爱吃的一种水果';
            }
            return data.text;
        }
    });

    //==============================本地数据单选回显==============================
    $('#fruit2').select2({
        //default classic bootstrap-5
        theme: "bootstrap-5",
        data: data1,
        //父容器,如果你是在模态框中使用需要指定这个(bootstrap)
        // dropdownParent: $('#publishModal'),
        language: 'zh-CN',
        //弹出的检索框的宽度
        width: '100%',
        //默认提示(本地数据时,需要在templateSelection方法中进行设置，同时该选项必须存在)
        placeholder: '请选择',
        //至少输入几个字符才开始检索
        minimumInputLength: 0,
        //可否手动删除
        allowClear: false,
        //是否多选
        multiple: false,
        //最多只能选择3个项目(multiple:true生效)
        maximumSelectionLength: 3,
        // 让template的html显示效果，否则输出代码
        escapeMarkup: function (markup) {
            return markup;
        },
        // 搜索结果样式样式自定义
        templateResult: function (option) {
            if (option.loading) return option.text;
            return `
                   <div class="py-1 fw-bold">${option.text}</div>
                `;
        },

        // 点击option后显示在输入框中的文本自定义
        templateSelection: function (data) {
            if (data.id === '') {
                return '请选择你最爱吃的一种水果';
            }
            return data.text;
        }
    });
    $("#fruit2").val("4").trigger("change");


    //==============================本地数据多选==============================
    $('#fruit3').select2({
        //default classic bootstrap-5
        theme: "bootstrap-5",
        data: data1,
        //父容器,如果你是在模态框中使用需要指定这个(bootstrap)
        // dropdownParent: $('#publishModal'),
        language: 'zh-CN',
        //弹出的检索框的宽度
        width: '100%',
        //默认提示(本地数据时多选时这里设置才有效果)
        placeholder: '请选择你爱吃的多种水果',
        //至少输入几个字符才开始检索
        minimumInputLength: 0,
        //可否手动删除
        allowClear: false,
        //是否多选
        multiple: true,
        //最多只能选择3个项目(multiple:true生效)
        maximumSelectionLength: 3,
        // 让template的html显示效果，否则输出代码
        escapeMarkup: function (markup) {
            return markup;
        },
        // 搜索结果样式样式自定义
        templateResult: function (option) {
            if (option.loading) return option.text;
            return `
                   <div class="py-1 fw-bold">${option.text}</div>
                `;
        },

        // 点击option后显示在输入框中的文本自定义
        templateSelection: function (data) {
            if (data.id === '') {
                return '请选择你爱吃的多种水果';
            }
            return data.text;
        }
    });

    //==============================本地数据多选回显===========================
    $('#fruit4').select2({
        //default classic bootstrap-5
        theme: "bootstrap-5",
        data: data1,
        //父容器,如果你是在模态框中使用需要指定这个(bootstrap)
        // dropdownParent: $('#publishModal'),
        language: 'zh-CN',
        //弹出的检索框的宽度
        width: '100%',
        //默认提示(本地数据时多选时这里设置才有效果)
        placeholder: '请选择你爱吃的多种水果',
        //至少输入几个字符才开始检索
        minimumInputLength: 0,
        //可否手动删除
        allowClear: false,
        //是否多选
        multiple: true,
        //最多只能选择3个项目(multiple:true生效)
        maximumSelectionLength: 3,
        // 让template的html显示效果，否则输出代码
        escapeMarkup: function (markup) {
            return markup;
        },
        // 搜索结果样式样式自定义
        templateResult: function (option) {
            if (option.loading) return option.text;
            return `
                   <div class="py-1 fw-bold">${option.text}</div>
                `;
        },

        // 点击option后显示在输入框中的文本自定义
        templateSelection: function (data) {
            return data.text;
        }
    });
    $('#fruit4').val(['1', '2', '3']).trigger('change')


    //==============================远程数据单选==============================
    $('#article').select2({
        //default classic bootstrap-5
        theme: "bootstrap-5",
        //父容器,如果你是在模态框中使用需要指定这个(bootstrap)
        // dropdownParent: $('#publishModal'),
        language: 'zh-CN',
        //弹出的检索框的宽度
        width: '100%',
        //默认提示
        placeholder: '请选择',
        //至少输入几个字符才开始检索
        // minimumInputLength: 1,
        //可否手动删除
        allowClear: true,
        //是否多选
        multiple: false,
        //最多只能选择3个项目
        maximumSelectionLength: 3,
        //通过ajax请求来获取数据
        ajax: {
            //该接口总数据是100条 _limit：规定每页多少条
            url: 'https://jsonplaceholder.typicode.com/posts?_limit=10',
            dataType: 'json',
            delay: 500,// 延迟显示
            data: function (params) {
                return {
                    // 搜索框内输入的内容
                    q: params.term,
                    // 第几页
                    _page: params.page || 1,
                };
            },
            // 返回结果预处理为select2需要的固定格式
            processResults: function (data, params) {
                params.page = params.page || 1;

                //转换成select2所需格式的数据
                let fdata = [];
                data.map((item) => {
                    fdata.push({
                        id: item.id,
                        text: item.title
                    })
                });

                return {
                    // 后台返回的数据集
                    results: fdata,
                    pagination: {
                        more: (params.page * 10) < 100
                    }
                };
            },
            //设置为false的话，那么每次请求都会携带一个随机时间戳格式参数
            cache: true
        },

        // 让template的html显示效果，否则输出代码
        escapeMarkup: function (markup) {
            return markup;
        },
        // 搜索结果样式自定义
        templateResult: function (option) {
            if (option.loading) return option.text;
            return `
                      <div class="py-2">
                        ${option.text}
                   </div>
                `;
        },
        // 点击option后显示在输入框中的文本自定义
        templateSelection: function (option) {
            return option.text;
        }
    });

    //==============================远程数据单选回显===========================
    $('#article2').select2({
        //default classic bootstrap-5
        theme: "bootstrap-5",
        //父容器,如果你是在模态框中使用需要指定这个(bootstrap)
        // dropdownParent: $('#publishModal'),
        language: 'zh-CN',
        //弹出的检索框的宽度
        width: '100%',
        //默认提示
        placeholder: '请选择',
        //至少输入几个字符才开始检索
        // minimumInputLength: 1,
        //可否手动删除
        allowClear: true,
        //是否多选
        multiple: false,
        //最多只能选择3个项目
        maximumSelectionLength: 3,
        //通过ajax请求来获取数据
        ajax: {
            //该接口总数据是100条 _limit：规定每页多少条
            url: 'https://jsonplaceholder.typicode.com/posts?_limit=10',
            dataType: 'json',
            delay: 500,// 延迟显示
            data: function (params) {
                return {
                    // 搜索框内输入的内容
                    q: params.term,
                    // 第几页
                    _page: params.page || 1,
                };
            },
            // 返回结果预处理为select2需要的固定格式
            processResults: function (data, params) {
                params.page = params.page || 1;

                //转换成select2所需格式的数据
                let fdata = [];
                data.map((item) => {
                    fdata.push({
                        id: item.id,
                        text: item.title
                    })
                });
                return {
                    // 后台返回的数据集
                    results: fdata,
                    pagination: {
                        more: (params.page * 10) < 100
                    }
                };
            },
            //设置为false的话，那么每次请求都会携带一个随机时间戳格式参数
            cache: true
        },

        // 让template的html显示效果，否则输出代码
        escapeMarkup: function (markup) {
            return markup;
        },
        // 搜索结果样式自定义
        templateResult: function (option) {
            if (option.loading) return option.text;
            return `
                      <div class="py-2">
                        ${option.text}
                   </div>
                `;
        },
        // 点击option后显示在输入框中的文本自定义
        templateSelection: function (option) {
            return option.text;
        }
    });
    $('#article2').append(new Option('qui est esse', 2, false, true)).trigger('change');//回显


    //==============================远程数据多选===========================
    $('#user').select2({
        //default classic bootstrap-5
        theme: "bootstrap-5",
        //父容器,如果你是在模态框中使用需要指定这个(bootstrap)
        // dropdownParent: $('#publishModal'),
        language: 'zh-CN',
        //弹出的检索框的宽度
        width: '100%',
        //默认提示
        placeholder: '请选择',
        //至少输入几个字符才开始检索
        // minimumInputLength: 1,
        //可否手动删除
        allowClear: true,
        //是否多选
        multiple: true,
        //最多只能选择3个项目
        maximumSelectionLength: 3,
        //通过ajax请求来获取数据
        ajax: {
            //该接口总数据是10条 _limit：规定每页多少条
            url: 'https://jsonplaceholder.typicode.com/users?_limit=3',
            dataType: 'json',
            delay: 500,// 延迟显示
            data: function (params) {
                return {
                    // 搜索框内输入的内容
                    q: params.term,
                    // 第几页
                    _page: params.page || 1,
                };
            },
            // 返回结果预处理为select2需要的固定格式
            processResults: function (data, params) {
                params.page = params.page || 1;

                //转换成select2所需格式的数据
                let fdata = [];
                data.map((item) => {
                    fdata.push({
                        id: item.id,
                        text: item.username,
                        email: item.email
                    })
                });

                return {
                    // 后台返回的数据集
                    results: fdata,
                    pagination: {
                        more: (params.page * 3) < 10
                    }
                };
            },
            //设置为false的话，那么每次请求都会携带一个随机时间戳格式参数
            cache: true
        },

        // 让template的html显示效果，否则输出代码
        escapeMarkup: function (markup) {
            return markup;
        },
        // 搜索结果样式自定义
        templateResult: function (option) {
            console.log(option);
            if (option.loading) return option.text;
            return `
                      <div class="py-2">
                        <div>用户名:${option.text}</div>
                        <div>邮箱:${option.email}</div>
                   </div>
                `;
        },
        // 点击option后显示在输入框中的文本自定义
        templateSelection: function (option) {
            return `<i class="bi bi-person"></i>` + option.text;
        }
    });
    //==============================远程数据多选回显===========================
    $('#user2').select2({
        //default classic bootstrap-5
        theme: "bootstrap-5",
        //父容器,如果你是在模态框中使用需要指定这个(bootstrap)
        // dropdownParent: $('#publishModal'),
        language: 'zh-CN',
        //弹出的检索框的宽度
        width: '100%',
        //默认提示
        placeholder: '请选择',
        //至少输入几个字符才开始检索
        // minimumInputLength: 1,
        //可否手动删除
        allowClear: true,
        //是否多选
        multiple: true,
        //最多只能选择3个项目
        maximumSelectionLength: 3,
        //通过ajax请求来获取数据
        ajax: {
            //该接口总数据是10条 _limit：规定每页多少条
            url: 'https://jsonplaceholder.typicode.com/users?_limit=3',
            dataType: 'json',
            delay: 500,// 延迟显示
            data: function (params) {
                return {
                    // 搜索框内输入的内容
                    q: params.term,
                    // 第几页
                    _page: params.page || 1,
                };
            },
            // 返回结果预处理为select2需要的固定格式
            processResults: function (data, params) {
                params.page = params.page || 1;

                //转换成select2所需格式的数据
                let fdata = [];
                data.map((item) => {
                    fdata.push({
                        id: item.id,
                        text: item.username,
                        email: item.email
                    })
                });

                return {
                    // 后台返回的数据集
                    results: fdata,
                    pagination: {
                        more: (params.page * 3) < 10
                    }
                };
            },
            //设置为false的话，那么每次请求都会携带一个随机时间戳格式参数
            cache: true
        },

        // 让template的html显示效果，否则输出代码
        escapeMarkup: function (markup) {
            return markup;
        },
        // 搜索结果样式自定义
        templateResult: function (option) {
            console.log(option);
            if (option.loading) return option.text;
            return `
                      <div class="py-2">
                        <div>用户名:${option.text}</div>
                        <div>邮箱:${option.email}</div>
                   </div>
                `;
        },
        // 点击option后显示在输入框中的文本自定义
        templateSelection: function (option) {
            return `<i class="bi bi-person"></i>` + option.text;
        }
    });


    //要回显的数据
    let data3 = [
        {'username': 'Bret', 'id': 1},
        {'username': 'Antonette', 'id': 2}
    ];



    $.each(data3, function (index, value) {
        $('#user2').append(new Option(value.username, value.id, false, true)).trigger('change');
    });


</script>
</body>
</html>